<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta http-equiv="X-UA-Compatable" content="IE=edge,Chrome=1.0">
	<meta name="format-detection" content="telephone=no">
	<meta name="format-detection" content="email=no">   
	<title>11周年G4玩出彩</title>
	<link rel="stylesheet/less" href="{$_C.hy_path}css/pic.css">
	<link rel="stylesheet/less" type="text/css" href="{$_C.hy_path}css/normalize.css">
	<style>
		
		
.alert {
	//border:1px solid silver;
	width: 80%;
	background-color: white;
	position: fixed;
	z-index: 99;
	top: 35%;
	left: 45%;
	margin-left: -40%;
	border-radius: 5px;
	box-shadow: 0px 0px 50px;
	text-align: center;
	display: none;
	font-size:18px;
	font-weight:500;
	text-decoration:none;
}

.alert div
{
	margin-top:10px;
	margin-bottom:20px
}

a:hover
{
	text-decoration:none;
	color:white;
}

.alert-btn {
	
	background-color: #F602C1;
	display: block;
	padding: 10px;
	color: #fff;
	text-decoration: none;
	border-radius: 10px;
	
}

ul.page_4 li:nth-child(2) input {
  display: block;
  width: 60%;
  height: 40px;
  background-color: transparent;
  border-style: none;
  padding-left: 20%;
}



#mcover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 20000;
}

#mcover img {
    position: fixed;
    
   
    width: 100%;
   
    z-index: 20001;
}

#share2
{
	 position: fixed;
    
   z-index: 20001;
    width: 100%;
	top:135px;
	text-align:center;
	
}	

#share3
{
	top:80%;
}	

#rank
{
	color:#F602C1;
	font-weight:700;
	font-size:26px;
	display:inline-block;
	position:absolute;
	top:243px;
	text-align:center;
	width:100%;
	z-index:100000;
}
	</style>
</head>
<body>
	<div id="mcover"  style="display:none;"> 
	<img src="{$_C.hy_path}images/picture/share1.png" id="share1">
	<span id="rank">15</span>
	<div id="share2">
	<img src="{$_C.hy_path}images/picture/share22.png" style="width:300px;margin:0 auto;position:relative;" >
	</div>
	<img src="{$_C.hy_path}images/picture/share3.png"  id="share3" onclick="javascript:window.location.href='index.php?g=mobile&m=picture&a=period'"> 
	</div>	
	<form class="wrapper">
		<ul class="page_4">
			<li>
			
				<div class="upload_wrapper">
					<p><img src="{$_C.hy_path}images/picture/camera.png" alt=""  data-img="img-area" class="send-add" ></p>
					<div ><img class="pre-img" id="img-area" src="{$_C.hy_path}images/picture/dcl.png" alt=""></div>
					
				</div>
				<div class="upload_wrapper">
					<p><img src="{$_C.hy_path}images/picture/camera.png" alt=""  data-img="img-area2" class="send-add" ></p>
					<div ><img class="pre-img" id="img-area2" src="{$_C.hy_path}images/picture/dcl.png" alt=""></div>
					
				</div>
			</li>
			<li>
				<div id="input"></div>
				<div id="input1"></div>
				<input type="text" placeholder="联系电话"  name="phone" width="60%" >
				<input type="text" placeholder="作者称呼" name="content" width="60%">
			</li>
			<li><img src="{$_C.hy_path}images/picture/submit.png" alt=""  class="yf-post" data-type="yes" ></li>
		</ul>
		
		<div class="alert" id="alert2" style="padding:15px">
		
			<div id="msg" class="fs3"></div>
			
			
			<a href="javascript:void(0)" class="alert-btn fc1 fs3">确定</a>
			
		</div>
		
	</form>
<script type="text/javascript" src="{$_C.hy_path}js/less.min.js"></script>
	<script type="text/javascript" src="{$_C.hy_path}js/zepto.min.js"></script>
	<script src="{$_C.hy_path}js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="{$_C.hy_path}js/picture.js"></script>
	<script src="{$_C.hy_path}js/yf.js"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		
		<script>
			
			
		
			
	
		
			function showMsg(msg)
			{
				$("#msg").text(msg);
				$('div#alert2').show();
			}
	
			$(function(){
				
					
				$('a.alert-btn').click(function (e) {
					$('div.alert').hide();
					});
				
				
				
				/* 表单提交  －  start */
	
				$('.yf-post').click(function(){
					
					var _this = $(this);
					var type = _this.attr('data-type');
					if(type == 'done')
					{
						showMsg("你已经上传过作品了");
					}
					else if(type == 'yes')
					{
						var data = {};
						var data_arr = $('form').serialize().replace(/\+/g,' ').split('&');
						for(var i=0;i<data_arr.length;i++)
						{
							var temp=data_arr[i].split('=');
							if(typeof(data[hungry.util.utf8_decode(temp[0])])!='undefined')
							{
								var arr=[];
								if(data[hungry.util.utf8_decode(temp[0])] instanceof Array)
								{
									arr=data[hungry.util.utf8_decode(temp[0])];
								}
								else
								{
									arr.push(data[hungry.util.utf8_decode(temp[0])]);
								}
									arr.push(hungry.util.utf8_decode(temp[1]));
									data[hungry.util.utf8_decode(temp[0])]=arr;
							}
							else
							{
								data[hungry.util.utf8_decode(temp[0])]=hungry.util.utf8_decode(temp[1]);
							}
						}
						_this.attr('data-type', 'no');
						_this.text('提交中');
						$.post('index.php?g=mobile&m=picture&a=send_set',data,function(result){
							if(result.error == 0)
							{
								showMsg(result.content);
								_this.attr('data-type', 'done');
							
							}
							else
							{
								
								showMsg(result.content);
								_this.attr('data-type', 'yes');
								_this.text('提交');
							}
						},'json');
					}
					else
					{
						showMsg("数据提交中");
					}
				});
				
				/* 表单提交  －  end */
				
			});
			
			/* 微信jssdk配置  －  start */
			
			wx.config({
				debug: false,
				appId: '{$jsdk.appId}',
				timestamp: {$jsdk.timestamp},
				nonceStr: '{$jsdk.nonceStr}',
				signature: '{$jsdk.signature}',
				jsApiList: [
					'chooseImage',
					'previewImage',
					'uploadImage',
					'downloadImage',
					 'onMenuShareTimeline',
		      'onMenuShareAppMessage'
				]
			});
			
			
			/* 微信jssdk配置  －  end */
			
			
			
				  
			wx.ready(function(){
				
				
				/* 分享  －  start */
				
				 wx.onMenuShareTimeline({
      title: '11年G4一起走过',
      link:'http://g4.shfyuan.com/ws/index.php?g=mobile&m=picture&a=index',
     imgUrl: 'http://g4.shfyuan.com/ws/Mobile/Webroot/gf/images/picture/g4logo.png',
  
      trigger: function (res) {
       
      },
      success: function (res) {
       			
			
      },
      cancel: function (res) {
       
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
    
	wx.onMenuShareAppMessage({
      link:'http://g4.shfyuan.com/ws/index.php?g=mobile&m=picture&a=index',
     title: '11年G4一起走过',
    desc: '11周年G4玩出彩',
 imgUrl: 'http://g4.shfyuan.com/ws/Mobile/Webroot/gf/images/picture/g4logo.png',
    success: function () { 
	
				
    },
    cancel: function () { 
       
    }
});
	
	/* 分享  －  end */
	
	/* 图片上传  －  start */
				var num = 0; 
	
				var images = {
				    localId: [],
				    serverId: []
				  };
				
				$('.send-add').click(function(){
					var area = $(this).attr("data-img");
					
					num=0;
					/* if(num>=2)
					{
						showMsg("至多可上传2张图片");
						return;
					 }
					*/
					wx.chooseImage({
						success: function (res) {
					        images.localId = res.localIds;
					        //showMsg('已选择 ' + res.localIds.length + ' 张图片');
					        if (images.localId.length == 0) {
					  	      	showMsg('请先选择图片');
								return;
					  	    }
					        
					        var i = 0; 
					        var length = images.localId.length;
					        images.serverId = [];
					        function upload() 
					        {
								
								if(num>=1)
								{
									
									return;
								}
								
								
								
								
								var img;
								
					        	wx.uploadImage({
					        		localId: images.localId[i],
					      		    success: function (res) {
					      		    	i++;
					      		    	num++;
					      		    	images.serverId.push(res.serverId);
					      		    	img = res.serverId;
					      		    	
					      		    	$.post('index.php?g=mobile&m=picture&a=upload_img',{ img:img,area:area },function(result){
					      		    		
					      		    		
					      		    		if(result.error == 0)
					      		    		{
												//$(result.content).insertBefore("#add");
												
					      		    		$("#"+area).attr("src",result.img);
					      		    		if(area=="img-area")
					      		    		{
					      		    			
					      		    			$("#input").html(result.content);
					      		    		}
					      		    		else
				      		    			{
					      		    			
					      		    			$("#input1").html(result.content);
				      		    			}
											
												//$(result.content).appendTo('.jp-textarea');
												
												
					      		    			if(i < length) 
							      	          	{
							      	            	upload();
							      	          	}
					      		    			if(i == length)
					      		    			{
//													if(num>=1)
//													{
//														$("#add").hide();
//														
//													}
					      		    				showMsg("上传成功");
													
													
												}
												
													
					      		    			
					      		    		}
					      		    		else
					      		    		{
					      		    			showMsg('上传失败');
					      		    			return;
					      		    		}
					      		    	},'json');
					      		    }
					        	});
					        }
					        
					        upload();
					    }
					});
	
	
				/* 图片上传  －  end */
				
				});
			});
			
			
			
		</script>
</body>
</html>